<template>
    <div>
        <div id="huanbing"></div>
    </div>
</template>
<script>
import * as echarts from "echarts";

export default {
    mounted() {
        this.echatsmxl();
    },
    methods: {
        echatsmxl() {
            echarts.init(document.getElementById("huanbing")).setOption({
                title: {
                    text: "员工数量",
                    textStyle: {
                        color: "#B1E2FE",
                        fontSize: "14px",
                    },
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                    borderWidth: 1,
                },
                // backgroundColor: "rgba(0,0,0,0.2)",
                legend: {
                    right: "3%",
                    orient: "vertical",
                    data: ["秩序", "工程", "客服", "保洁", "外委", "自有"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                series: [
                    {
                        name: "访问来源",
                        // radius: "65%",
                        // center: ["40%", "50%"],
                        type: "pie",
                        selectedMode: "single",
                        radius: [0, "30%"],
                        label: {
                            position: "inner",
                            fontSize: 12,
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 2343, name: "自有" },
                            { value: 3182, name: "外委" },
                            // { value: 679, name: 'Marketing', selected: true }
                        ],
                    },
                    {
                        name: "访问来源",
                        type: "pie",
                        radius: ["40%", "70%"],
                        labelLine: {
                            length: 5,
                        },
                        label: {
                            // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
                            borderColor: "#8C8D8E",
                            borderWidth: 0,
                            borderRadius: 6,
                            rich: {
                                a: {
                                    color: "#6E7079",
                                    lineHeight: 22,
                                    align: "center",
                                },
                                hr: {
                                    borderColor: "#8C8D8E",
                                    width: "100%",
                                    borderWidth: 1,
                                    height: 0,
                                },
                                b: {
                                    color: "#4C5058",
                                    fontSize: 14,
                                    fontWeight: "bold",
                                    lineHeight: 33,
                                },
                                per: {
                                    color: "#fff",
                                    backgroundColor: "#4C5058",
                                    padding: [3, 4],
                                    borderRadius: 4,
                                },
                            },
                        },
                        data: [
                            {
                                value: 573,
                                name: "工程",
                            },
                            { value: 643, name: "客服" },
                            { value: 1770, name: "秩序" },
                            { value: 1861, name: "保洁" },
                        ],
                    },
                ],
            });
        },
    },
};
</script>
<style lang="scss" scoped>
#huanbing {
    width: 100%;
    height: 170px;
}
</style>  